<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue test</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <label for="number">银行账号</label>

    <div>
      <input type="text" v-bank="bank" @blur="getBank" @input="bank = $event.target.dataset.bank"/>
    </div>
    
    <!-- <p>{{ str }}</p> -->
    <!-- <label for="banckAccount">银行账号</label> -->

  </div>
  <script type="text/javascript">
  let vm = new Vue({
    el: "#app",
    data: {
      bank: "123456789"
    },
    directives: {
      bank: {
        inserted: function(el, binding) {
          el.value = String(binding.value).trim().replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
          el.dataset.bank = String(binding.value).trim().replace(/\s/g,'').replace(/[^\d]/g,'')
        },
        bind: function(el, binding, vnode) {
          el.handler = function(event) {
            let inputValue = el.value
            el.value = inputValue.trim().replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
            el.dataset.bank = inputValue.trim().replace(/\s/g,'').replace(/[^\d]/g,'')
          }
          el.addEventListener('input', el.handler)
        },
        unbind: function(el) {
          el.addEventListener('input', el.handler)
        }
      }
    },
    methods: {
      getBank() {
        console.log(this.bank, "bank")
      },
      getInput(e) {
        this.bank = e.target.dataset.bank
        console.log(e.target.dataset, "e")
      } 
    }
    
  })
  </script>
</body>
</html>